<template>
    <div class="chart"
         ref="map">
    </div>
</template>
<script>
import axios from 'axios'
import echarts from '../../assets/js/echarts.min.js'
export default {
    mounted() {
        //console.info("mounted")
        let chart = echarts.init(this.$refs.map)
        chart.showLoading({
            maskColor: 'transparent'
        })
        axios.get('static/data/shenyang.json').then(function (resp) {
            chart.hideLoading()
            //console.info("json: %o", resp.data)
            echarts.registerMap('shenyang', resp.data);
            chart.setOption({
                title: {
                    text: '沈阳市',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}'
                },
                series: [{
                    type: 'map',
                    map: 'shenyang',
                    roam: 'scale',
                    itemStyle: {
                        normal: {
                            borderColor: '#eee',
                            areaColor: '#8BD0F1'
                        },
                        emphasis: {
                            areaColor: '#fe994e'
                        }
                    }
                }]
            })
        })

    }
}
</script>
